<template>
  <div class="LegalAdviser">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
              <div class="backIcon" @click="back">
                <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
              </div>
              <div class="theme">法律顾问</div>
            </div>-->
    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <!-- <van-list :finished="finished" finished-text="没有更多了"> -->
        <!-- 名片部分 -->
        <div v-for="(item, index) in adviserData" :key="index">
          <div class="bCard">
            <div class="cardHead">
              <div class="headImg">
                <img :src="item.url? picUrl(item.url) : defaultImg" :οnerrοr="defaultImg" />
              </div>
              <div class="headName">{{item.name}}</div>
            </div>
            <div class="cardtitle">{{item.role}}</div>
          </div>
          <!-- 卡片信息 -->
          <div class="mCard">
            <div class="groupBox">
              <van-cell-group>
                <van-field disabled="true" label="所在社区：" :value="item.address"></van-field>
                <!-- <van-field disabled="true" label="联系电话：" :value="item.phone" right-icon="phone" @click="ContactType(item.phone)"></van-field> -->
                <div class="telStyle"><span>联系电话：</span><a class="telNum" :href="'tel:' +item.phone"><div>{{item.phone}}</div><img style="width:22px;height:22px;display:flex;margin-left:20px;" src="@/assets/aaa/ddhh.png" alt=""></a></div>
                <van-field disabled="true" rows="1" autosize type="textarea" label="工作时间：" :value="item.workTime"></van-field>
                <van-field disabled="true" label="工作地址：" :value="item.regionName"></van-field>
              </van-cell-group>
            </div>
            <div class="groupBox">
              <van-cell-group>
                <van-field disabled="true" label="工作职能"></van-field>
                <van-field disabled="true" rows="1" autosize type="textarea" :value="item.duty"></van-field>
              </van-cell-group>
            </div>
          </div>
        </div>
      <!-- </van-list> -->
    </div>
    <van-pagination class="pages" v-model="currentPage" :page-count="allcount" force-ellipses @change="requestPostLegalAdviser" />
  </div>
</template>
<script>
  export default {
    name: "LegalAdviser",
    data() {
      return {
        adviserData: [],
        finished: true,
        currentPage: 1,
        allcount: 1,
        defaultImg: require('@/assets/transfer/legalAdviser/falu.png')
      };
    },
    created() {
      this.requestPostLegalAdviser();
    },
    methods: {
      back() {
        this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
        this.$router.back(); // 路由向后退一步
      },
      requestPostLegalAdviser() {
        this.post("corporateLawyer/load_public", {
            pageSize: 10,
            pageIndex: this.currentPage,
            
          })
          .then(res => {
            if (res.array.length) {
              this.allcount = Number(res.pageInfo.pageCount);
              this.adviserData = res.array;
            }
          })
          .catch(err => {});
      },
      // ContactType(v) {
      //   api.call({
      //     type: 'tel_prompt',
      //     number: v
      //   });
      // }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~@/smobile.scss";
  .LegalAdviser {
    overflow-y: unset;
    .header {
      padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;
      position: absolute;
      width: $sm-img-per-max;
      height: 21px;
      background: $sm-bg-color;
      z-index: 2;
      display: flex;
      flex-direction: row nowrap;
      justify-content: flex-start;
      .backIcon {
        position: absolute;
        white-space: nowrap;
        height: $sm-icon-px-md;
        z-index: 4;
        .iconImage {
          height: $sm-icon-px-md;
          width: $sm-icon-px-md;
          transform: rotateY(180deg);
        }
      }
      .theme {
        position: absolute;
        font-weight: bold;
        width: $sm-img-per-max;
        text-align: center;
        white-space: nowrap;
        z-index: 3;
      }
    }
    .outermostMargin {
      background: $sm-bg-color-grey;
      color: $sm-text-color;
      font-size: $sm-font-size-lg;
      overflow: auto;
      // height: 100vh; 
      height: calc(100vh - 86px);
      .bCard {
        padding: $sm-spaceing-block-lg 0 $sm-spaceing-block-lg 0;
        height: $sm-img-per-mini;
        width: $sm-img-per-max;
        background-image: url("../../assets/transfer/legalAdviser/cardbg7_02.png");
        background-repeat: no-repeat;
        background-size: cover;
        .cardHead {
          padding: $sm-spacing-row-lg 0 $sm-spacing-row-lg 0;
          width: $sm-img-per-max;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .headImg {
            text-align: center;
            height: $sm-icon-px-xxl;
            width: $sm-icon-px-xxl;
            border-radius: $sm-border-radius-circle;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .headName {
            padding: $sm-spaceing-block-sm 0 0 0;
            font-size: $sm-font-size-xl;
          }
        }
        .cardtitle {
          height: $sm-img-size-md;
          width: $sm-img-per-max;
          background-image: url("../../assets/transfer/legalAdviser/titlebg7_04.png");
          background-repeat: no-repeat;
          background-size: cover;
          display: flex;
          justify-content: center;
          align-items: center;
          color: $sm-text-color-inverse;
          font-size: $sm-font-sizeVH-md;
        }
      }
      .mCard {
        padding: 0 $sm-spaceing-block-lg 0 $sm-spaceing-block-lg;
        .groupBox {
          margin: $sm-spacing-col-xl 0 $sm-spacing-col-xl 0;
          .telStyle{
            position: relative;
            display: flex;
            box-sizing: border-box;
            // width: 100%;
            margin: 10px 0 0 16px;
            padding-bottom: 10px;
            color: #323233;
            font-size: 14px;
            line-height: 24px;
            background-color: #fff;
            border-bottom: 1px solid #ebedf0;
            // transform: scaleY(.6);
            // ::after{
            //   position: absolute;
            //   box-sizing: border-box;
            //   content: ' ';
            //   pointer-events: none;
            //   right: 0;
            //   bottom: 0;
            //   left: 16px;
            //   border-bottom: 1px solid #ebedf0;
            //   transform: scaleY(.5);
            // }
            span{
              flex: none;
              width: 90px;
              color: #323233;
              font-size: 14px;
              line-height: 24px;
            }
            .telNum{
              display: inline-block;
              display: flex;
              position: relative;
              overflow: hidden;
              color: #969799;
              text-align: right;
              vertical-align: middle;
              flex: 1;
            }
          }
        }
      }
    } 
    .pages {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 111;
      background: #ffffff;
    }
  }
</style>